import React from 'react';

class ContextMenu extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            visible: false,
        };
    }

    componentDidMount() {
        document.addEventListener('contextmenu', this._handleContextMenu);
        document.addEventListener('click', this._handleClick);
        document.addEventListener('scroll', this._handleScroll);
    };

    componentWillUnmount() {
        document.removeEventListener('contextmenu', this._handleContextMenu);
        document.removeEventListener('click', this._handleClick);
        document.removeEventListener('scroll', this._handleScroll);
    }

    _handleContextMenu = (event: any) => {

        // this.setState({ visible:false });//当点击其他地方右键时可以根据需求来判断是否需要先关闭菜单
        event.preventDefault();

        this.setState({ visible: true });
        const clickX = event.clientX;
        const clickY = event.clientY;               //事件发生时鼠标的Y坐标
        const screenW = window.innerWidth;   //文档显示区的宽度
        const screenH = window.innerHeight;
        // const rootW = this.root.offsetWidth;     //右键菜单本身元素的宽度
        // const rootH = this.root.offsetHeight;
        //
        // // right为true，说明鼠标点击的位置到浏览器的右边界的宽度可以放contextmenu。
        //
        // // 否则，菜单放到左边。 // top和bottom，同理。
        //
        // const right = (screenW - clickX) > rootW;
        // const left = !right;
        // const top = (screenH - clickY) > rootH;
        // const bottom = !top;
        //
        // if (right) {
        //     this.root.style.left = `${clickX + 15}px`;
        // }
        //
        // if (left) {
        //     this.root.style.left = `${clickX - rootW - 15}px`;
        // }
        //
        // if (top) {
        //     this.root.style.top = `${clickY + 15}px`;
        // }
        //
        // if (bottom) {
        //     this.root.style.top = `${clickY - rootH - 15}px`;
        // }
    };

    _handleClick = (event: any) => {
        const { visible } = this.state;
        // const wasOutside = !(event.target.contains === this.root);

        // if (wasOutside && visible) this.setState({ visible: false, });
    };

    _handleScroll = () => {
        const { visible } = this.state;

        if (visible) this.setState({ visible: false, });
    };

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        const { visible } = this.state;
        return (
            <div>123</div>
        );
    }
}
